<template>
  <div>
    <el-button type="success" @click="dialogVisible = true">添加栏目</el-button>
    <!-- 栏目列表 -->
    <el-table :data="tableData" border style="width: 460px">
      <el-table-column label="编号" width="180">
        <template v-slot="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="栏目名称" width="280">
      </el-table-column>
    </el-table>

    <!-- 添加栏目 弹窗 -->
    <el-dialog
      title="添加栏目"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      活动名称
      <el-input v-model="name" placeholder="请输入栏目名称"> </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategoryFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { category, addCategory } from "@/api/category";
export default {
  data() {
    return {
      tableData: [], // 栏目列表
      dialogVisible: false, // 控制弹窗的显示隐藏
      name: "", // 栏目名称
    };
  },
  created() {
    // 获取栏目列表
    this.getCategory();
  },
  methods: {
    // 获取栏目列表
    getCategory() {
      category().then((res) => {
        this.tableData = res.data.data;
      });
    },
    // 关闭弹窗前触发
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加栏目
    addCategoryFn() {
      addCategory({
        name: this.name,
      }).then((res) => {
        console.log(63, res);
        this.$message.success(res.data.message);
        this.dialogVisible = false;
        this.getCategory();
      });
    },
  },
};
</script>

<style lang="less">
.el-input {
  width: 87%;
}
</style>